/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
Ext.apply(Ext.form.VTypes, {
    daterange: function(val, field) {
        var date = field.parseDate(val);
        if (!date) {
            return;
        }
        if (field.startDateField && (!this.dateRangeMax || (date.getTime() != this.dateRangeMax.getTime()))) {
            var start = Ext.getCmp(field.startDateField);
            start.setMinValue(date);
            start.validate();
            this.dateRangeMax = date;
        } else if (field.endDateField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var end = Ext.getCmp(field.endDateField);
            end.setMinValue(date);
            end.validate();
            this.dateRangeMin = date;
        } else if (field.deadlineField && (!this.dateRangeMin || (date.getTime() != this.dateRangeMin.getTime()))) {
            var dl = Ext.getCmp(field.deadlineField);
            dl.setMinValue(date);
            dl.validate();
            this.dateRangeMin = date;
        }
        return true;
    }
});
Ext.onReady(function() {
    var isNew = false;
    var id;
    Ext.QuickTips.init(); // turn on validation errors beside the field globally
    Ext.form.Field.prototype.msgTarget = 'side';
    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({
            url: 'conference/all'
        }),
        reader: new Ext.data.JsonReader({
            root: 'conferences',
            totalProperty: 'totalCount',
            id: 'id'
        },
        [{
            name: 'id'
        },
        {
            name: 'name_mk'
        },
        {
            name: 'name_en'
        },
        {
            name: 'date_start'
        },
        {
            name: 'date_end'
        },
        {
            name: 'date_submition'
        },
        {
            name: 'date_notification'
        },
        {
            name: 'date_final'
        },
        {
            name: 'participation_fee'
        },
        {
            name: 'isActive'
        }])
    });
    var assignSuccess = function() {
        ds.load({
            params: {
                start: 0,
                limit: 25
            }
        });
    };
    var assignFail = function() {};
    var setAction = function() {
        if (!grid.getSelectionModel().hasSelection()) {
            Ext.Msg.alert('Information', 'Please select conference to make it active');
            return;
        }
        var conference = grid.getSelectionModel().getSelected();
        Ext.Ajax.request({
            url: 'conference/setactive',
            success: assignSuccess,
            failure: assignFail,
            params: {
                id: conference.id
            }
        });
    }
    var pagingBar = new Ext.PagingToolbar({
        pageSize: 25,
        store: ds,
        displayInfo: true,
        displayMsg: 'Displaying conferences {0} - {1} of {2}',
        emptyMsg: "No conferences to display",
        items: [{
            text: 'Set as active conference',
            handler: setAction,
            waitMsg: 'Setting active conference...',
            tooltip: 'Select conference and click to set as active'
        }]
    });
    function renderActive(value, p, r) {
        var yes = '<img src="../images/2.jpg">';
        var no = '<img src="../images/1.jpg">';
        if (value == 1) {
            return yes;
        } else {
            return no;
        }
    } // create the grid
    var grid = new Ext.grid.GridPanel({
        store: ds,
        columns: [{
            header: "Name Mk",
            width: 100,
            dataIndex: 'name_mk',
            sortable: true
        },
        {
            header: "Name En",
            width: 100,
            dataIndex: 'name_en',
            sortable: true
        },
        {
            header: "Submtion",
            width: 150,
            dataIndex: 'date_submition',
            sortable: true
        },
        {
            header: "Notification",
            width: 150,
            dataIndex: 'date_notification',
            sortable: true
        },
        {
            header: "Final",
            width: 150,
            dataIndex: 'date_final',
            sortable: true
        },
        {
            header: "Start Date",
            width: 150,
            dataIndex: 'date_start',
            type: 'date',
            sortable: true
        },
        {
            header: "End Date",
            width: 150,
            dataIndex: 'date_end',
            type: 'date',
            sortable: true
        },
        {
            header: "Participation Fee",
            width: 100,
            dataIndex: 'participation_fee',
            sortable: true
        },
        {
            header: "Active",
            width: 50,
            dataIndex: 'isActive',
            sortable: true,
            renderer: renderActive
        }],
        sm: new Ext.grid.RowSelectionModel({
            singleSelect: true
        }),
        renderTo: 'data-grid',
        width: 1000,
        height: 200,
        title: 'Conferences',
        frame: true,
        loadMask: true,
        bbar: pagingBar,
        viewConfig: {
            forceFit: true
        }
    });
    grid.on('rowclick',
    function(grid, rowIndex, e) {
        isNew = false;
        var record = ds.getAt(rowIndex);
        fs.getForm().loadRecord(record);
        id = record.get('id');
    });
    var fs = new Ext.FormPanel({
        frame: true,
        title: 'Conference Details',
        labelAlign: 'right',
        labelWidth: 120,
        width: 340,
        waitMsgTarget: true,
        renderTo: 'data-form',
        items: [new Ext.form.FieldSet({
            title: 'Conference Information',
            autoHeight: true,
            defaultType: 'textfield',
            items: [{
                fieldLabel: 'Name Mk',
                name: 'name_mk',
                allowBlank: false,
                blankText: 'This field is required.',
                width: 190
            },
            {
                fieldLabel: 'Name En',
                name: 'name_en',
                allowBlank: false,
                blankText: 'This field is required.',
                width: 190
            },
            new Ext.form.DateField({
                fieldLabel: 'Submission Deadline',
                name: 'date_submition',
                id: 'date_submition',
                format: 'Y-m-d H:i:s',
                allowBlank: false,
                blankText: 'This field is required.',
                vtype: 'daterange',
                startDateField: 'date_start',
                width: 150 // id of the end date field
            }), new Ext.form.DateField({
                fieldLabel: 'Notification Deadline',
                name: 'date_notification',
                id: 'date_notification',
                format: 'Y-m-d H:i:s',
                allowBlank: false,
                blankText: 'This field is required.',
                vtype: 'daterange',
                startDateField: 'date_start',
                width: 150 // id of the end date field
            }), new Ext.form.DateField({
                fieldLabel: 'Final Deadline',
                name: 'date_final',
                id: 'date_final',
                format: 'Y-m-d H:i:s',
                allowBlank: false,
                blankText: 'This field is required.',
                vtype: 'daterange',
                startDateField: 'date_start',
                width: 150 // id of the end date field
            }), new Ext.form.DateField({
                fieldLabel: 'Start Date',
                name: 'date_start',
                id: 'date_start',
                format: 'Y-m-d H:i:s',
                allowBlank: false,
                blankText: 'This field is required.',
                vtype: 'daterange',
                endDateField: 'date_end',
                deadlineField: 'deadline',
                width: 150
            }), new Ext.form.DateField({
                fieldLabel: 'End Date',
                name: 'date_end',
                format: 'Y-m-d H:i:s',
                allowBlank: false,
                blankText: 'This field is required.',
                id: 'date_end',
                width: 150 //		vtype: 'daterange',
                //		startDateField: 'date_start' // id of the start date field
            }), new Ext.form.NumberField({
                fieldLabel: 'Participation Fee',
                allowBlank: false,
                allowNegative: false,
                name: 'participation_fee',
                blankText: 'This field is required.'
            })]
        })],
        buttonAlign: 'left',
        buttons: [{
            text: 'Save',
            handler: function() {
                if (isNew) {
                    id = 0;
                }
                fs.getForm().submit({
                    url: 'conference/edit',
                    params: {
                        'id': id
                    },
                    success: successFn,
                    waitMsg: 'Saving Data...'
                });
            }
        },
        {
            text: 'New',
            handler: function() {
                isNew = true;
                fs.getForm().reset();
            }
        },
        {
            text: 'Delete',
            handler: function() {
                Ext.MessageBox.confirm('Confirm', 'Are you sure you want to delete the record?', showResult);
            }
        }]
    });
    ds.load();
    ds.on('load',
    function() {
        var record = ds.getAt(0);
        fs.getForm().loadRecord(record);
        id = record.get('id');
    });
    function showResult(btn) {
        if (btn == 'yes') {
            Ext.Ajax.request({
                url: 'conference/delete',
                success: successFn,
                params: {
                    'id': id
                },
                waitMsg: 'Deleting Data...'
            });
        }
    };
    function successFn() {
        ds.load({
            params: {
                start: 0,
                limit: 25
            }
        });
    }
});